<script>
export default {
  data() {
    return {
      buttonData: {},
    }
  },
  methods: {
    // 按钮点击事件
    buttonClick(localValue) {
      console.log('localValue: ', localValue);
    },
  }
}
</script>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "Button"
  }
}
</route>

<template>
  <view class="main">
    <Text class="title">主按钮/主按钮禁用</Text>
    <view class="margin-view">
      <eui-button type="primary" v-model="buttonData" title="主按钮" @buttonClick="buttonClick" singleTag="primary_主按钮" />
      <view class="margin-inder-view" />
      <eui-button type="primary" title="主按钮禁用" @buttonClick="buttonClick" singleTag="primary_主按钮禁用" :disabled="true" />
    </view>
    <Text class="title">主要/次要</text>
    <view class="margin-view">
      <eui-button type="base2" v-model="buttonData" @buttonClick="buttonClick" title="次按钮" />
      <view class="margin-inder-view" />
      <eui-button type="base" v-model="buttonData" @buttonClick="buttonClick" title="主按钮" />
      <view class="margin-inder-view" />
      <eui-button type="base2" v-model="buttonData" @buttonClick="buttonClick" title="次按钮禁用" disabled />
      <view class="margin-inder-view" />
      <eui-button type="base" v-model="buttonData" @buttonClick="buttonClick" title="主按钮禁用" disabled />
    </view>
    <Text class="title">筛选</text>
    <view class="margin-view">
      <eui-button type="max2" @buttonClick="buttonClick" title="终止"/>
      <view class="margin-inder-view" />
      <eui-button type="max2" @buttonClick="buttonClick" title="开始预审/确认" />
      <view class="margin-inder-view" />
      <eui-button type="max" @buttonClick="buttonClick" title="更新复盘数" />
      <view class="margin-inder-view" />
      <eui-button type="max2" @buttonClick="buttonClick" title="次按钮禁用" disabled />
      <view class="margin-inder-view" />
      <eui-button type="max" @buttonClick="buttonClick" title="主按钮禁用" disabled />
    </view>
    <Text class="title">小尺寸/卡片线性按钮</text>
    <view class="margin-view">
      <eui-button type="min2" @buttonClick="buttonClick" title="次按钮五字" />
      <view class="margin-inder-view" />
      <eui-button type="min2" @buttonClick="buttonClick" title="次按钮禁用" disabled />
      <view class="margin-inder-view" />
      <eui-button type="min2" @buttonClick="buttonClick" title="次按钮" :fontColor="'#02B7E6'" :buttonColor="'rgba(2,183,230,0.1)'" :borderColor="'#02B7E6'" />
      <view class="margin-inder-view" />
      <eui-button type="min" @buttonClick="buttonClick" title="主按钮" />
      <view class="margin-inder-view" />
      <eui-button type="min" minWidth="100" @buttonClick="buttonClick" title="按钮" />
    </view>
  </view>
</template>

<style lang="scss">
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #FFFFFF;
  justify-content: space-around;
  align-items: flex-start;
}
.title {
  width: 500px;
  height: 56px;
  font-weight: 500;
  font-size: 22px;
  color: #000000;
  line-height: 56px;
  text-align: left;
  font-style: normal;
  margin-left: 22px;
}
.margin-view {
  margin: 22px 0 22px 60px;
}
.margin-inder-view {
  width: 10px;
  height: 10px;
}
</style>
